<template>
  <keep-alive>
    <component :is="comp" />
  </keep-alive>
</template>

<script setup>
import { computed, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useNavStore } from '@/store/nav'
import Follow from './desktop/Follow.vue'
import Foryou from './desktop/Foryou.vue'

const navStore = useNavStore()
const { homeTab, atForyouTab, atFollowTab, atHome } = storeToRefs(navStore)
const { toHome } = navStore

const comp = computed(() => {
  const atForyou = atForyouTab.value
  const atFollow = atFollowTab.value
  if (atForyou) return Foryou
  if (atFollow) return Follow
  return null
})

watch(homeTab, () => {
  if (!atHome.value) {
    toHome()
  }
})
</script>
